<template>
  <div class="order">
      <h4>运输管理>已分配待取件单</h4>
      <div class="filter-box" style="padding: 30px;
            background: #fff;
            border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0;height:100px;">
                            <div class="demo-input-suffix">
                            订单编号：
                                <el-input clearable
                                    placeholder="请输入订单编号"
                                    v-model="orderNum" class="filter-input"
                                    @keyup.enter.native="searchOrder()">
                                </el-input>
                            </div>
                            <!-- <div class="commetn_left">
                                <span style="display:inline-block;margin-right:12px;"> 目的地：</span>  
                                <el-select clearable v-model="startSite" placeholder="请选择省" style="margin-left:10px;">
                                    <el-option
                                    v-for="item in siteSelected"
                                    :key="item.value"
                                    :label="item.siteName"
                                    :value="item.id">
                                    </el-option>
                                </el-select> 
                                <el-select clearable v-model="startSite" placeholder="请选择市" style="margin-left:5px;">
                                    <el-option
                                    v-for="item in siteSelected"
                                    :key="item.value"
                                    :label="item.siteName"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-select clearable v-model="startSite" placeholder="请选择区" style="margin-left:5px;">
                                            <el-option
                                            v-for="item in siteSelected"
                                            :key="item.value"
                                            :label="item.siteName"
                                            :value="item.id">
                                            </el-option>
                                </el-select>
                            </div> -->
                            <div class="demo-input-suffix" >
                                收货人手机号：
                                <el-input clearable
                                    placeholder="请输入手机号码"
                                    v-model="receiveTel" class="filter-input"
                                    @keyup.enter.native="searchOrder()">
                                </el-input>
                          </div>
                          <div class="demo-input-suffix">
                                运输员手机号：
                                <el-input clearable
                                    placeholder="请输入手机号码"
                                    v-model="transTel" class="filter-input"
                                    @keyup.enter.native="searchOrder()">
                                </el-input>
                          </div>
                          <div class="demo-input-suffix">
                                配送员手机号：
                                <el-input clearable
                                    placeholder="请输入手机号码"
                                    v-model="deliverTel" class="filter-input"
                                    @keyup.enter.native="searchOrder()">
                                </el-input>
                          </div> 
                            <div class="demo-input-suffix">
                                <el-button type="primary" @click="searchOrder()" >搜索</el-button>
                            </div>
                          <!-- <div class="demo-input-suffix">
                            收货人：
                                <el-input clearable
                                    placeholder="请输入手机号码"
                                    v-model="receiveTel" class="filter-input"
                                    @keyup.enter.native="searchOrder()">
                                </el-input>
                          </div>
                          <div class="demo-input-suffix">
                                运输员：
                                <el-select clearable v-model="startSite" placeholder="请选择区">
                                            <el-option
                                            v-for="item in siteSelected"
                                            :key="item.value"
                                            :label="item.siteName"
                                            :value="item.id">
                                            </el-option>
                                </el-select>
                          </div>
                          <div class="demo-input-suffix">
                                配送员：
                                <el-select clearable v-model="startSite" placeholder="请选择区">
                                            <el-option
                                            v-for="item in siteSelected"
                                            :key="item.value"
                                            :label="item.siteName"
                                            :value="item.id">
                                            </el-option>
                                </el-select>
                          </div> -->
       </div>  
       <div class="container" style="border-radius: 0 0 5px 5px ">           
             <el-table v-loading="loading" :data="data" border style="width: 100%;margin-top:20px;" ref="multipleTable" stripe
                      >
                 <el-table-column type="index" id="sortTrue" width="80" label="序号" align="center" :index="indexMethod"></el-table-column>
                 <el-table-column prop="orderId" label="订单编号" align="center"></el-table-column>
                 <el-table-column prop="receiveMan" label="收货人"  align="center"></el-table-column>
                 <el-table-column prop="receiveTel" label="联系方式"  align="center"></el-table-column>
                 <el-table-column prop="caseNum" label="数量" align="center"></el-table-column>
                 <el-table-column prop="createOrderTime" label="下单时间" align="center" fit show-overflow-tooltip >
                 </el-table-column>
                 <el-table-column prop="transUserName" label="运输员" align="center" ></el-table-column>
                 <el-table-column prop="transUserTel" label="运输员手机号" align="center"></el-table-column>
                 <el-table-column prop="endLocation" label="目的地" align="center" width="150px" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="deliveryUserName" label="配送员" align="center" ></el-table-column>
                 <el-table-column prop="deliveryUserTel" label="配送员手机号" align="center" ></el-table-column>
                 <el-table-column prop="againDistribution" label="操作" align="center" >
                      <template slot-scope="scope">
                         <span @click="allot( scope.row.id)" style="color:blue">重新分配</span>             
                      </template>
                 </el-table-column>
            </el-table>
            <!-- 配送员对话框 -->
             <el-dialog title="分配配送员" :visible.sync="dialogFormVisible" width="30%" top="30vh">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item prop="region" label="选择配送员" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择配送员">
                            <el-option v-for="item in  deliveryList"  :label="item.realName" :value="item.tel" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="selectDeliver('ruleForm')">确 定</el-button>
                </div>
             </el-dialog>
             <div class="pagination">
                <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="getPageNum"
                    :page-sizes="[10, 20, 50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                 </el-pagination>
             </div>
      </div>
  </div>
</template>

<script>
import { order_distributed,transUserList,get_deliver_all,select_deliver } from '@/request/api'
export default {
    data(){
       return {
           loading:true,
           data: [],
           total:0,
           pageNum:1,
           pageSize:10,
           orderNum:'',        // 订单编号
           receiveTel:'',     // 收货人手机号
           transTel:'',      // 运输员手机号
           deliverTel:'',   // 配送员手机号
           startSite:'',
           distSite:'',
           dialogFormVisible:false,//重新分配对话框
           againDistribution:'重新分配',
            formLabelWidth: "120px",
            form: {
                region: ""
            },
            batchArr: "", // 批量操作的数组
            transList: [], // 查询配送员列表
            orderFarmerId: "",
            isBatch: false, // 是否是批量操作
            rules: {
                region: [{ required: true, message: "请选择配送员", trigger: "change" }]
            },
            selected: [],
            deliveryList:'',//配送员列表
            id:'',
       }
    },
    created(){
       this.get_order_distributed();
    },
    methods:{
        // 序号
       indexMethod(index) {
           return  index + 1 + (this.pageNum -1 ) * this.pageSize;
       },
        //  当前页
       getPageNum(e){
          this.pageNum = e;
          this.get_order_distributed();
       },
       //当前页的条数
       handleSizeChange(e){
          this.pageSize = e;
          this.get_order_distributed();
       },
       // 配送员列表的渲染  
       get_order_distributed(){
           order_distributed({
                orderId:this.orderNum,
                // districtId:'',
                receiveMan:'',
                transUserId:'',
                transUserTel:this.transTel,
                receiveTel:this.receiveTel,
                deliveryUserId:'',
                deliveryUserTel:this.deliverTel,
                pageNum:this.pageNum,
                pageSize:this.pageSize
           }).then(res => {
               console.log(res);
               this.data = res.rows;
               this.total = res.total;
               this.loading = false;
           })
       },
       // 搜索   
       searchOrder(){
         this.get_order_distributed();
       },
       // 批量操作   
    //     batchHandle() {
    //         this.isBatch = true; //  批量操作
    //         if (this.batchArr.length == 0) {
    //             alert("请选择一项");
    //         } else {
    //             this.dialogFormVisible = true;
    //            // this.getSelectTrans();
    //         }
    //    },
       // 点击重新分配
      allot(id) {
          console.log(id)
        this.dialogFormVisible = true;
        this.orderFarmerId = id;
        //this.id=id;
       this.getSelectTrans();
        this.isBatch = false; // 不是批量
      },
    //  点击匹配送员里面的保存
    //   saveTrans(formName) {
    //     this.$refs[formName].validate(valid => {
    //         //分配分配送员
    //         if (valid) {
    //         if (this.isBatch) {
    //             select_deliver({
    //             // orderFarmerId: this.batchArr.join(","),
    //             // transUserId: this.form.region
    //             orderFarmerIdStr: this.batchArr.join(","),
    //            deliveryUserId: this.form.region
    //             }).then(res => {
    //             console.log(3,res);
    //             if (res.code == 1) {
    //                 this.$message({
    //                 type: "success",
    //                 message: "分配成功"
    //                 });
    //                 this.dialogFormVisible = false;
    //                 this.orderFarmerId = "";
    //                 this.getOrdering();
    //             }
    //             });
    //         } else {
    //             select_deliver({
    //             orderFarmerId: this.orderFarmerId,
    //             transUserId: this.form.region
    //             }).then(res => {
    //             console.log(res);
    //             if (res.code == 1) {
    //                 this.$message({
    //                 type: "success",
    //                 message: "分配成功"
    //                 });
    //                 this.dialogFormVisible = false;
    //                 this.orderFarmerId = "";
    //                 this.getOrdering();
    //             }
    //             });
    //         }
    //         }
    //     });
    //   },
     selectDeliver(formName) {
         console.log(1)
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isBatch) {
            //    批量操作
            select_deliver({
              orderFarmerIdStr: this.orderFarmerId ,
              deliveryUserId: this.form.region
            }).then(res => {
              if (res.code == 1) {
                this.dialogFormVisible = false;
                this.$message({
                  type: "success",
                  message: "分配成功"
                });
                 this.get_order_distributed()
              }
            });
          } else {
            //   单个操作
            select_deliver({
              orderFarmerIdStr: this.orderFarmerId,
              deliveryUserId: this.form.region
            }).then(res => {
              if (res.code == 1) {
                this.dialogFormVisible = false;
                this.$message({
                  type: "success",
                  message: "分配成功"
                });
                this.get_order_distributed()
                // this.$router.push({
                //     path:'/waybill_2'
                // })
              }
            });
          }
        } else {
          this.$message({
            type: "info",
            message: "请选择配送员"
          });
        }
      });
    },
    // 渲染匹配司机对话框里面的匹配司机
    getSelectTrans() {
     get_deliver_all({
        id: this.orderFarmerId
      }).then(res => {
        if (res.code == 1) {
          this.deliveryList = res.data;
         
        }
      });
    }
    }
 }
</script>
<style  scoped>
.order > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.handle-box {
  margin-bottom: 20px;
}
.filter-input {     
  width: 200px;
  display: inline-block;
}
.comment_left{
    display: inline-block;
}
.again_left{
  float:left;
  width:90%;
}
.again_right{
   float:right;
   width:10%;
}
.demo-input-suffix{
   float:left;
   margin-bottom:30px;
   width:19%;
}
</style>